在Vue.js中，Vue Router 是一个官方提供的路由管理器，它允许你以单页面应用（SPA）的方式构建复杂的用户界面。Vue Router 提供了一系列的钩子函数（也称为导航守卫），允许你在路由跳转过程中执行一些逻辑操作，比如权限验证、数据预取等。

Vue Router的钩子函数主要分为全局守卫、路由独享守卫和组件内守卫。以下是详细的介绍：

全局守卫

全局守卫在整个应用中都有效，可以在应用启动时通过VueRouter实例进行配置。

1. beforeEach

   • 类型：全局前置守卫
   • 触发时机：路由开始导航时触发，在路由确认前调用。
   • 用法：

     router.beforeEach((to, from, next) => {
       // to: Route 对象，表示目标路由
       // from: Route 对象，表示来源路由
       // next: Function，必须调用此方法以 resolve 钩子
       // 调用 next() 导航继续
       // 调用 next(false) 中断导航
       // 调用 next('/') 或 next({ path: '/' }) 重定向到其他路由
       // 调用 next(error) 导航终止且错误被传递给路由的错误处理函数
     });
     

2. beforeResolve

   • 类型：全局解析守卫
   • 触发时机：在路由被确认前，但在组件被解析之前调用。
   • 用法：

     router.beforeResolve((to, from, next) => {
       // 与 beforeEach 类似
     });
     

3. afterEach

   • 类型：全局后置守卫
   • 触发时机：在路由确认之后调用，不接受next函数。
   • 用法：

     router.afterEach((to, from) => {
       // 不接受 next 参数
     });
     

路由独享守卫

路由独享守卫只针对某个特定的路由实例有效，可以在路由配置中直接定义。

1. beforeEnter

   • 类型：路由独享守卫
   • 触发时机：在路由进入前调用。
   • 用法：

     const router = new VueRouter({
       routes: [
         {
           path: '/foo',
           component: Foo,
           beforeEnter: (to, from, next) => {
             // 与 beforeEach 类似
           }
         }
       ]
     });
     

组件内守卫

组件内守卫是定义在组件内部的方法，用于在路由导航到该组件或离开该组件时执行特定逻辑。

1. beforeRouteEnter

   • 类型：进入守卫
   • 触发时机：在进入组件之前调用，此时组件实例还未创建。
   • 用法：

     export default {
       beforeRouteEnter (to, from, next) {
         // 不能访问组件实例 `this`
         next(vm => {
           // 通过 `vm` 访问组件实例
         });
       }
     };
     

2. beforeRouteUpdate

   • 类型：更新守卫
   • 触发时机：当路由参数变化且组件被复用时调用。
   • 用法：

     export default {
       beforeRouteUpdate (to, from, next) {
         // 可以访问组件实例 `this`
         this.someData = to.params.someData;
         next();
       }
     };
     

3. beforeRouteLeave

   • 类型：离开守卫
   • 触发时机：在导航离开组件时调用。
   • 用法：

     export default {
       beforeRouteLeave (to, from, next) {
         // 可以访问组件实例 `this`
         if (userHasUnsavedChanges()) {
           const answer = window.confirm('Do you really want to leave? you have unsaved changes!');
           if (!answer) return next(false);
         }
         next();
       }
     };
     

错误处理

路由错误处理可以通过捕获导航守卫中传递的error对象来进行。

router.onError((error) => {
  console.error('Router error:', error);
});

总结

Vue Router 提供的这些钩子函数使得在路由导航过程中执行特定逻辑变得非常方便，无论是全局、特定路由还是组件内部，都可以找到合适的位置来放置你的逻辑代码。通过合理使用这些钩子函数，你可以实现复杂的导航逻辑、权限验证、数据预取等功能。